/** * 修改个人信息页面 */
<template>
	<view v-if="JSON.stringify(userInfo) !== '{}'">
		<view>
			<u-navbar title="修改个人信息" :autoBack="true" :bgColor="bgColor"></u-navbar>
		</view>

		<view class="u-page__item">
			<u-form :model="form" ref="uForm">
				<u-form-item label="头像" border-bottom prop="avatar">
					<view class="cimg" @click="chooseImg">
						<image :src="form.avatar"></image>
					</view>
				</u-form-item>
				<u-form-item label="昵称" border-bottom prop="nickName">
					<u-input v-model="form.nickName" />
				</u-form-item>
				<u-form-item label="手机号" border-bottom prop="phone">
					<u-input v-model="form.phone" disabled disabledColor="transparent" />
				</u-form-item>
				<u-form-item label="学校" border-bottom @click="show1 = true" prop="school">
					<view class="text">{{ form.school }}</view>
				</u-form-item>
				<u-form-item @click="show2 = true" label="生日" border-bottom prop="birthday">
					<view class="text">{{ form.birthday | date }}</view>
				</u-form-item>
				<u-form-item @click="show3 = true" label="性别" border-bottom prop="gender">
					<view class="text">{{ form.gender }}</view>
				</u-form-item>
				<u-form-item @click="show4 = true" label="专业" border-bottom prop="speciality">
					<view class="text">{{ form.speciality }}</view>
				</u-form-item>
				<u-form-item label="学历" border-bottom prop="education">
					<u-input v-model="form.education" />
				</u-form-item>
				<u-form-item label="意向职位" border-bottom prop="position">
					<u-input v-model="form.position" />
				</u-form-item>
				<u-form-item label="意向地点" border-bottom prop="address">
					<u-input v-model="form.address" />
				</u-form-item>
				<u-form-item label="个人介绍" border-bottom prop="personDesc">
					<view class="myIntroduce">
						<textarea auto-height v-model="form.personDesc" placeholder="暂无内容~" />
					</view>

					<!-- <u-input v-model="form.intro" type="textarea"  :height="300" auto-height /> -->
				</u-form-item>
			</u-form>
			<button @click="submit" class="btnSubmit">确认修改</button>
			<button @click="reset" class="btnReset">重置</button>

			<u-picker :show="show1" keyName="school" :columns="columns1" @cancel="show1 = false" @confirm="confirm1"></u-picker>
			<u-datetime-picker :show="show2" v-model="value" mode="date" @cancel="show2 = false" @confirm="confirm2"></u-datetime-picker>
			<u-picker :show="show3" :columns="columns3" @cancel="show3 = false" @confirm="confirm3"></u-picker>
			<u-picker :show="show4" :columns="columns4" @cancel="show4 = false" @confirm="confirm4"></u-picker>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { putUserInfo, getSchoolList } from '@/http/api.js';

export default {
	data() {
		return {
			// 表单数据
			form: {
				nickName: 'cw061532',
				personDesc: '',
				phone: '181****2263',
				school: '广东科贸职业学院',
				birthday: '',
				gender: '男',
				speciality: '软件技术',
				position: 'java开发',
				address: '广州',
				avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
				education: '大专'
			},
			// 选择器的显隐
			show2: false,
			show1: false,
			show3: false,
			show4: false,
			// 选择器的选项
			value: '',
			columns1: [['广东科贸职业学院','广东岭南职业学院']],
			columns3: [['男', '女']],
			columns4: [['软件技术', '大数据技术']],

			bgColor: '#00dcb9',
			// titles: [ '头像','昵称','手机号','学校','生日','性别','专业','学历','毕业年份','意向职位','意向地点','个人介绍'],

			// 表单校验规则
			rules: {
				nickName: [
					{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					},
					{
						min: 8,
						max: 20,
						message: '昵称长度为8-20之间',
						trigger: 'blur'
					},
					// 正则判断为字母或数字
					{
						pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{8,20}$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母、数字和中文字符',
						trigger: 'blur'
					}
				]
			}
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},

	onShow() {
		if (this.userInfo && JSON.stringify(this.userInfo) !== '{}') {
			this.form = JSON.parse(JSON.stringify(this.userInfo));
			// this.form = uni.getStorageSync('userInfo');
			// console.log(this.form);

			// 从后端获取学校选项
			this.getSchoolGroup();
			
		} else {
			uni.$showMsg('获取个人信息失败', 2000);
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/my/user/myUser'
				});
			}, 2000);
		}
	},
	methods: {
		...mapMutations(['updateUserInfo']),

		// 发请求获取学校选择
		async getSchoolGroup() {
			try {
				const res = await getSchoolList();
				// this.schoolList = res.rows;
				const c1 = new Array();
				c1[0] = res.rows;
				this.columns1 = c1;
				
			} catch (err) {
				console.log(err);
			}
		},

		// 选择器的取消与确认按钮的处理
		confirm1(e) {
			this.show1 = false;
			this.form.sid = e.value[0].sid;
			this.form.school = e.value[0].school;
		},

		confirm2(e) {
			this.show2 = false;
			const time = this.result(e.value, e.mode);
			this.form.birthday = time;
		},

		confirm3(e) {
			this.show3 = false;
			this.form.gender = e.value[0];
		},
		confirm4(e) {
			this.show4 = false;
			this.form.speciality = e.value[0];
		},

		// 日期选择器
		result(time, mode) {
			// console.log(time, mode);
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast;
			if ((mode = 'date')) {
				return timeFormat(time, 'yyyy-mm-dd');
			}
		},
		// 头像
		chooseImg() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['camera', 'album'], //camera拍照，album打开手机相册
				success: (res) => {
					uni.uploadFile({
						url: 'http://8.139.5.28:3000/common/upload', // 这里加上图片上传的地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: { Authorization: uni.getStorageSync('token') ? uni.getStorageSync('token') : '', userType: 'user' },
						success: (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data);
							this.form.avatar = res.url;
						},
						fail: (err) => {
							uni.hideLoading();
							uni.showToast({
								title: '网络已断开',
								icon: 'none'
							});
							console.log(err);
						}
					});
				}
			});
		},
		// 提交修改
		submit() {
			uni.showModal({
				title: '提示',
				content: '是否要修改你的个人信息？',
				success: async (res) => {
					if (res.confirm) {
						// 发请求更改用户信息---手机号暂时不支持修改、gender性别0是男1是女（字符串）、sid学校int型

						// 发给后端的数据---sendupdate
						let sendupdate = JSON.parse(JSON.stringify(this.form));
						// 改性别
						sendupdate.gender === '男' ? (sendupdate.gender = '0') : (sendupdate.gender = '1');

						// 发请求
						try {
							// 传处理后的数据
							const res = await putUserInfo(sendupdate);
							if (res.code === 200) {
								// 请求成功后，修改vuex和本地存储中的用户信息---this.form
								this.updateUserInfo(this.form);
								// 更新后，跳转页面
								uni.$showMsg('修改个人信息成功', 1500);
								// 返回信息展示页
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							} else {
								uni.$showMsg(res.msg, 1500);
							}
						} catch (err) {
							//TODO handle the exception
							console.log(err);
						}
					} else if (res.cancel) {
					}
				}
			});
		},
		// 重置表单，要有ref+prop
		reset() {
			this.form = uni.getStorageSync('userInfo');
			this.$refs.uForm.resetFields();
		}
	},
	computed: {
		// 从vuex中获取用户信息
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss" scoped>
.u-page__item {
	margin-top: 126rpx;
	padding: 60rpx 40rpx 40rpx;
}
::v-deep .u-input {
	border: 0 !important;
}
::v-deep .u-line {
	border-bottom: 2rpx solid #ccc !important;
}
.cimg {
	width: 140rpx;
	height: 140rpx;
	margin-left: 20rpx;
	margin-top: -40rpx;
	border-radius: 50%;
	overflow: hidden;
}
::v-deep .u-form-item__body__left__content__label,
::v-deep .u-input__content__field-wrapper input,
::v-deep .uni-input-input {
	font-size: 36rpx !important;
}
.text {
	margin-left: 20rpx;
	font-size: 36rpx;
	padding: 10rpx 0;
}
::v-deep .u-form-item__body__left {
	width: 30% !important;
}
.btnSubmit,
.btnReset {
	margin: 40rpx 0;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 34rpx;
	background-color: #00dcb9;
	color: white;
	border-radius: 12rpx;
}
.btnReset {
	background-color: #fff;
	color: #00dcb9;
	border-radius: 12rpx;
	border: 2rpx solid #00dcb9;
}
::v-deep .uni-textarea-textarea,
textarea {
	width: 100% !important;
	// word-wrap:break-word !important;
	// word-break:break-all !important;
	// overflow: hidden !important;
}
.myIntroduce {
	width: 90%;
	padding: 0 20rpx;
}
::v-deep .u-form-item__body__right__message {
	margin-left: 0 !important;
}
</style>
